<template>
  <view class="category-tabs-wrap">

    <!-- 瀑布流 -->
    <view class="u-waterfall" :class="title?'u-waterfalls':''">
      <view id="u-left-column" class="u-column" style="width: 48%;">
        <view class="goods-item u-m-b-16 u-m-r-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList" :key="leftGoods.id">
          <shopro-goods-card
              style="width: 100%;"
              :toptitle="title"
              :detail="leftGoods"
              :type="leftGoods.activity_type || ''"
              :image="leftGoods.image"
              :title="leftGoods.title"
              :subtitle="leftGoods.subtitle"
              :price="leftGoods.price"
              :discount_price="leftGoods.discount_price"
              :originPrice="leftGoods.original_price"
              :tagTextList="leftGoods.activity_discounts_tags"
              :tag_list="leftGoods.tag_list"
              :zeng_text="leftGoods.zeng_text||''"
              @click="$Router.push({ path: '/pages/goods/new_detail', query: { id: leftGoods.id } })"
          ></shopro-goods-card>
        </view>
      </view>
      <view id="u-right-column" class="u-column" style="width: 48%;">
        <view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList" :key="rightGoods.id">
          <shopro-goods-card
              style="width: 100%;"
              :toptitle="title"
              :detail="rightGoods"
              :type="rightGoods.activity_type || ''"
              :image="rightGoods.image"
              :title="rightGoods.title"
              :subtitle="rightGoods.subtitle"
              :price="rightGoods.price"
              :discount_price="rightGoods.discount_price"
              :originPrice="rightGoods.original_price"
              :tagTextList="rightGoods.activity_discounts_tags"
              :tag_list="rightGoods.tag_list"
              :zeng_text="rightGoods.zeng_text||''"
              @click="$Router.push({ path: '/pages/goods/new_detail', query: { id: rightGoods.id } })"
          ></shopro-goods-card>
        </view>
      </view>
    </view>
    <view class="x-c" style="width: 100%;">
      <!-- 缺省页 -->
      <shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>

      <!-- 更多 -->
      <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
    </view>
  </view>
</template>

<script>
/**
 * category-tabs
 * @description 一个可以吸顶的分类列表
 * @property {Boolean} enable = false - 是否吸顶,tabbar项中，组件不会自动销毁，需要自行开关
 * @property {Array | Number} styleType  - 卡片类型
 */
let systemInfo = uni.getSystemInfoSync();
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import shGoodsCard from '../../pages/index/components/sh-goods-card.vue';
export default {
  components: {
    shGoodsCard
  },
  data() {
    return {
      height: 'auto',
      left: 0,
      // 瀑布流 350-330
      addTime: 10, //排序间隙时间
      leftHeight: 0,
      rightHeight: 0,
      listParams: {
        category_id: 0,
        keywords: '',
        page: 1
      },
      leftList: [],
      rightList: [],
      tempList: [],
      scrollLeft: 0,
      isEmpty: false,
      goodsList: [],
      loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      currentPage: 1,
      lastPage: 1,
    };
  },
  watch: {
    seckilltime(val){
      if(val){
        this.clear()
        this.getGoodsList("1");
      }

    },
    dazhelei(val){
      if(val){
        this.clear()
        this.getGoodsList("2");
      }

    }
  },
  props: {
    enable: {
      type: Boolean,
      default: false
    }
    ,title: {
      type: String,
      default: "惠选首页"
    },
    category_id:{
      type: String,
      default: ""
    },
    searchVal:{
      type: String,
      default: ""
    },
    seckilltime:{
      type: String,
      default: ""
    },
    dazhelei:{
      type: String,
      default: ""
    },
  },
  created() {
    var that = this;
    debugger
    if(that.title == '惠选首页'||that.title == '惠选分类商品'|| that.title == '预售专区'){
      that.getGoodsList("3");
    }
    // // 触底监听
    uni.$on('uOnReachBottom', data => {
      if (that.currentPage < that.lastPage) {
        if(this.goodsList)
        that.currentPage += 1;
        that.getGoodsList(4);
      }
    });
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // 瀑布流相关
    async splitData() {
      if (!this.tempList.length) return;
      let item = this.tempList[0];
      if (!item) return;
      // 分左右
      if (this.leftHeight < this.rightHeight) {
        this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
        // if(JSON.stringify(this.leftList).indexOf(JSON.stringify(item))==-1){
        //   this.leftList.push(item);// 进行动态的操作
        // }
        this.leftList.push(item);// 进行动态的操作
      } else if (this.leftHeight > this.rightHeight) {
        this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
        // if(JSON.stringify(this.rightList).indexOf(JSON.stringify(item))==-1){
        //   this.rightList.push(item);// 进行动态的操作
        // }
        this.rightList.push(item);// 进行动态的操作
      } else {
        this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
        // if(JSON.stringify(this.leftList).indexOf(JSON.stringify(item))==-1){
        //   this.leftList.push(item);// 进行动态的操作
        // }
        this.leftList.push(item);// 进行动态的操作
      }
      // 移除临时列表的第一项，如果临时数组还有数据，继续循环
      this.tempList.splice(0, 1);
      // console.log("this.tempList.length============",this.tempList.length,this.tempList)
      if (this.tempList.length) {
        setTimeout(() => {
          this.splitData();
        }, this.addTime);
      }
      // console.log("=this.rightList :",this.rightList ,"=this.leftList :",this.leftList ,)
    },
    // 商品列表
    async getGoodsList(type) {
      console.log("==type===",type)
      let that = this;
      // console.log("====this.lock",this.tempList.length)
      if(that.title == '惠选首页'){
      await  that.$https('goods.huixuanlist', {
          token: uni.getStorageSync("token"),
          page: that.currentPage
        }).then(res => {
          if (res.code === 1) {

            if(!res.data.data){
              return false
            }
            res.data.data.forEach((item)=>{
              let newarr = []
              item.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              item.tag_list=newarr;
            })
            if(that.currentPage == '1'){
              that.goodsList = [];
            }
            that.goodsList = [...that.goodsList, ...res.data.data];
            let newarr = [...that.rightList, ...that.leftList];
            let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
            var newarrs = newarr.map(item=>item.id);
            that.tempList = allgoodList.filter(item=>!newarrs.includes(item.id))
            that.splitData();
            that.isEmpty = !that.goodsList.length;
            that.lastPage = res.data.last_page;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
          }
        });
      }
      if(that.title == '限时秒杀'){
        await that.$https('goods.seckillList', {
          token: uni.getStorageSync("token"),
          page: that.currentPage,
          type:"ing",
          param_time:that.seckilltime,
        }).then(res => {
          if (res.code === 1) {

            res.data.data.forEach((item)=>{
              if(item.service){
                let newarr = []
                item.service.forEach((item1)=>{
                  newarr.push(item1.name)
                })
                item.tag_list=newarr;
              }
            })
            if(that.currentPage == '1'){
              that.goodsList = [];
            }
            that.goodsList = [...that.goodsList, ...res.data.data];
            let newarr = [...that.rightList, ...that.leftList];
            let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
            var newarrs = newarr.map(item=>item.id);
            that.tempList = allgoodList.filter(item=>!newarrs.includes(item.id))
            that.isEmpty = !that.goodsList.length;
            that.lastPage = res.data.last_page;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            that.splitData();
          }
        });
      }
      if(that.title == '折上返券'){
        await that.$https('goods.zhekouList', {
          token: uni.getStorageSync("token"),
          page: that.currentPage,
          category_id:that.dazhelei,
        }).then(res => {
          if (res.code === 1) {

            res.data.data.forEach((item)=>{
              let newarr = []
              item.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              item.tag_list=newarr;
            })
            if(that.currentPage == '1'){
              that.goodsList = [];
            }
            that.goodsList = [...that.goodsList, ...res.data.data];
            let newarr = [...that.rightList, ...that.leftList];
            let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
            var newarrs = newarr.map(item=>item.id);
            that.tempList = allgoodList.filter(item=>!newarrs.includes(item.id))
            that.isEmpty = !that.goodsList.length;
            that.lastPage = res.data.last_page;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            that.splitData();
          }
        });
      }
      if(that.title == '预售专区'){
        await that.$https('goods.yushouList', {
          token: uni.getStorageSync("token"),
          page: that.currentPage
        }).then(res => {
          if (res.code === 1) {

            res.data.data.forEach((item)=>{
              let newarr = []
              item.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              item.tag_list=newarr;
            })
            if(that.currentPage == '1'){
              that.goodsList = [];
            }
            that.goodsList = [...that.goodsList, ...res.data.data];
            let newarr = [...that.rightList, ...that.leftList];
            let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
            var newarrs = newarr.map(item=>item.id);
            that.tempList = allgoodList.filter(item=>!newarrs.includes(item.id))
            that.isEmpty = !that.goodsList.length;
            that.lastPage = res.data.last_page;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            that.splitData();
          }
        });
      }
      if(that.title == '惠选分类商品'){
        await that.$https('goods.huixuanclasslist', {
          token: uni.getStorageSync("token"),
          page: that.currentPage,
          category_id:that.category_id,
          keywords:that.searchVal
        }).then(res => {
          if (res.code === 1) {

            res.data.data.forEach((item)=>{
              let newarr = []
              item.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              item.tag_list=newarr;
            })
            if(that.currentPage == '1'){
              that.goodsList = [];
            }
            that.goodsList = [...that.goodsList, ...res.data.data];
            let newarr = [...that.rightList, ...that.leftList];
            let allgoodList = JSON.parse(JSON.stringify(that.goodsList));
            var newarrs = newarr.map(item=>item.id);
            that.tempList = allgoodList.filter(item=>!newarrs.includes(item.id))
            that.isEmpty = !that.goodsList.length;
            that.lastPage = res.data.last_page;
            that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
            that.splitData();
          }
        });
      }
    },
    clear() {
      this.leftList = [];
      this.rightList = [];
      this.leftHeight = 0;
      this.rightHeight = 0;
      this.tempList = [];
    },
  }
};
</script>

<style lang="scss" scoped>
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.big-card-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.category-tabs-wrap {
  min-height: 1000rpx;
  margin: 22rpx 22rpx 0;
  //padding: 10rpx 22rpx;
  background: transparent;
  border-radius: 10rpx;
  // 吸顶
  .u-sticky-wrap {
    background-color: #fff;
  }
  // 瀑布流
  .u-waterfall {
    @include vue-flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 22rpx 22rpx;
  }
  .u-waterfalls{
    margin: 0;
  }
  .u-column {
    @include vue-flex;
    flex: 1;
    flex-direction: column;
    height: auto;
  }
}
// 滑动分类
.tabs-content {
  background: #fff;
  white-space: nowrap;
  .tab-item {
    min-height: 90rpx;
    margin: 30rpx 10rpx 0;
    padding: 0 20rpx;
    .tab-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #666666;
    }
    .title-active {
      color: #333333;
    }
    .tab-des {
      font-size: 60rpx;
      font-weight: 400;
      color: #999999;
      text-align: center;
      background: transparent;
      border-radius: 15rpx;
      padding: 2rpx 20rpx;
      margin-top: 10rpx;
    }
    .des-active {
      background: #333;
      border-radius: 15rpx;
      padding: 2rpx 20rpx;
      color: #ffffff;
      margin-top: 10rpx;
    }
  }
}
</style>
